
  <h6 class="usa-heading-alt" id="big-footer">Big footer</h6>

  <footer class="usa-footer usa-footer-big" role="contentinfo">
    <div class="usa-grid usa-footer-return-to-top">
      <a href="#">Return to top</a>
    </div>
    <div class="usa-footer-primary-section">
      <div class="usa-grid-full">
        <nav class="usa-footer-nav usa-width-two-thirds">
          <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
            <li class="usa-footer-primary-link">
              <h4>Topic</h4>
            </li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
          </ul>
          <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
            <li class="usa-footer-primary-link">
              <h4>Topic</h4>
            </li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
          </ul>
          <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
            <li class="usa-footer-primary-link">
              <h4>Topic</h4>
            </li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
          </ul>
          <ul class="usa-unstyled-list usa-width-one-fourth usa-footer-primary-content">
            <li class="usa-footer-primary-link">
              <h4>Topic</h4>
            </li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
            <li><a href="javascript:void(0);">Secondary link</a></li>
          </ul>
        </nav>

        <div class="usa-sign_up-block usa-width-one-third">
          <h3 class="usa-sign_up-header">Sign up</h3>

          <label class="" for="email" id="">Your email address</label>
          <input id="email" name="email" type="email">

          <button type="submit">Sign up</button>
        </div>
      </div>
    </div>

    <div class="usa-footer-secondary_section usa-footer-big-secondary-section">
      <div class="usa-grid">
        <div class="usa-footer-logo usa-width-one-half">
          <img class="usa-footer-logo-img" src="{{ site.baseurl }}/assets/img/logo-img.png" alt="Logo image">
          <h3 class="usa-footer-logo-heading">Name of Agency</h3>
        </div>
        <div class="usa-footer-contact-links usa-width-one-half">
          <a class="usa-link-facebook" href="javascript:void(0);">
            <span>Facebook</span>
          </a>
          <a class="usa-link-twitter" href="javascript:void(0);">
            <span>Twitter</span>
          </a>
          <a class="usa-link-youtube" href="javascript:void(0);">
            <span>YouTube</span>
          </a>
          <a class="usa-link-rss" href="javascript:void(0);">
            <span>RSS</span>
          </a>
          <address>
            <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
            <p>(800) CALL-GOVT</p>
            <a href="mailto:info@agency.gov">info@agency.gov</a>
          </address>
        </div>
      </div>
    </div>
  </footer>

  <h6 class="usa-heading-alt" id="medium-footer">Medium footer</h6>

  <footer class="usa-footer usa-footer-medium" role="contentinfo">
    <div class="usa-grid usa-footer-return-to-top">
      <a href="#">Return to top</a>
    </div>
    <div class="usa-footer-primary-section">
      <div class="usa-grid-full">
        <nav class="usa-footer-nav">
          <ul class="usa-unstyled-list">
            <li class="usa-width-one-sixth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-sixth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-sixth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-sixth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-sixth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <div class="usa-footer-secondary_section">
      <div class="usa-grid">
        <div class="usa-footer-logo usa-width-one-half">
          <img class="usa-footer-logo-img" src="{{ site.baseurl }}/assets/img/logo-img.png" alt="Logo image">
          <h3 class="usa-footer-logo-heading">Name of Agency</h3>
        </div>
        <div class="usa-footer-contact-links usa-width-one-half">
          <a class="usa-link-facebook" href="javascript:void(0);">
            <span>Facebook</span>
          </a>
          <a class="usa-link-twitter" href="javascript:void(0);">
            <span>Twitter</span>
          </a>
          <a class="usa-link-youtube" href="javascript:void(0);">
            <span>YouTube</span>
          </a>
          <a class="usa-link-rss" href="javascript:void(0);">
            <span>RSS</span>
          </a>
          <address>
            <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
            <p>(800) CALL-GOVT</p>
            <a href="mailto:info@agency.gov">info@agency.gov</a>
          </address>
        </div>
      </div>
    </div>
  </footer>

  <h6 class="usa-heading-alt" id="slim-footer">Slim footer</h6>

  <footer class="usa-footer usa-footer-slim" role="contentinfo">
    <div class="usa-grid usa-footer-return-to-top">
      <a href="javascript:void(0);">Return to top</a>
    </div>
    <div class="usa-footer-primary-section">
      <div class="usa-grid-full">
        <nav class="usa-footer-nav usa-width-two-thirds">
          <ul class="usa-unstyled-list">
            <li class="usa-width-one-fourth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-fourth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-fourth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
            <li class="usa-width-one-fourth usa-footer-primary-content">
              <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
            </li>
          </ul>
        </nav>
        <div class="usa-width-one-third">
          <div class="usa-footer-primary-content usa-footer-contact_info">
            <p>(800) CALL-GOVT</p>
          </div>
          <div class="usa-footer-primary-content usa-footer-contact_info">
            <a href="mailto:info@agency.gov">info@agency.gov</a>
          </div>
        </div>
      </div>
    </div>

    <div class="usa-footer-secondary_section">
      <div class="usa-grid">
        <div class="usa-footer-logo">
          <img class="usa-footer-slim-logo-img" src="{{ site.baseurl }}/assets/img/logo-img.png" alt="Logo image">
          <h3 class="usa-footer-slim-logo-heading">Name of Agency</h3>
        </div>
      </div>
    </div>
  </footer>

